<template>
    <div class="spec-ifications">
        <el-dialog
            title="产品规格"
            :visible.sync="is_dialog"
            width="50%"
            top="11vh"
        >
            <div class="dialog-box">
                <div class="dialog-top">
                    <div class="multi-spec">
                        <div class="multi-text">
                            <div>
                                <span class="title">多规格</span>
                                <span class="explain"
                                    >开启后1个产品可以选择多个规格</span
                                >
                            </div>
                        </div>
                        <div class="multi-spec-but">
                            <el-switch
                                v-model="is_switch"
                                active-color="#3388ff"
                                inactive-color="#dcdfe6"
                                active-value="1"
                                inactive-value="2"
                                @change="setConfigureSwitch"
                            >
                            </el-switch>
                        </div>
                    </div>
                    <div class="dialog-from">
                        <el-form ref="form">
                            <div class="form-row">
                                <el-form-item class="form-item">
                                    <el-input
                                        v-model="spec_name"
                                        placeholder="搜索一级规格"
                                        class="w-input"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item class="form-item">
                                    <el-button
                                        type="primary"
                                        @click="specSearch"
                                        >搜索</el-button
                                    >
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="specReset"
                                        >重置</el-button
                                    >
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
                <div
                    class="spec-data-list comm-list"
                    ref="specDataList"
                    v-infinite-scroll="loadFun"
                    @mousewheel="scrollLoadMore"
                >
                    <el-tree
                        :data="specData"
                        :props="defaultProps"
                        node-key="id"
                        :default-checked-keys="defaultCheckboxData"
                        show-checkbox
                        default-expand-all
                        check-strictly
                        @check="setCheckboxFun"
                        ref="areaTrees"
                        ><div
                            class="custom-tree-node"
                            slot-scope="{ node, data }"
                        >
                            <div class="node-label">{{ node.label }}</div>
                            <span>
                                <el-button
                                    icon="el-icon-plus"
                                    circle
                                    v-if="data.lev != 3"
                                    @click.stop="setAddchildSpecFun('1', data)"
                                >
                                </el-button>
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click.stop="setAddchildSpecFun('2', data)"
                                >
                                </el-button>
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click.stop="setRemovespecFun(data)"
                                >
                                </el-button>
                            </span></div
                    ></el-tree>
                </div>
                <div class="add-spec-box">
                    <el-button @click="addSpecFun">添加规格</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import LocalStore from "@/js/LocalStore.js";

export default {
    name: "specifications",
    data() {
        return {
            is_dialog: false,
            spec_name: "",
            is_switch: "2",
            specData: [],
            defaultCheckboxData: [],
            pfrom: -10,
            is_load: false,
            cpInfo: LocalStore.getCpInfo,
            defaultProps: {
                children: "son",
                label: "title",
            },
            scrolled: 0,
        };
    },
    created() {},
    mounted() {},
    methods: {
        // 监听滚动
        scrollLoadMore() {
            this.scrolled = this.$refs.specDataList.scrollTop;
        },
        // 新增1级
        addSpecFun() {
            const data = {
                id: 0,
            };
            this.setAddchildSpecFun("1", data);
        },
        // 请求添加/编辑/添加下级规格
        setAddchildSpecFun(type, data) {
            this.$prompt(
                "请输入规格名称",
                `${
                    data.id == 0 && type == 1
                        ? "添加规格"
                        : data.id != 0 && type == 1
                        ? "添加下级规格"
                        : "编辑规格"
                }`,
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: /^.+$/,
                    inputErrorMessage: "请输入规格名称",
                    inputValue: type == 1 ? "" : data.title,
                }
            )
                .then(async ({ value }) => {
                    let url = config.SPEC_SAVE;
                    let param = {
                        fid: type == 1 ? data.id : data.fid,
                        id: type == 1 ? undefined : data.id,
                        title: value,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        if (type == 1) {
                            if (data.id == 0) {
                                // 添加1级的处理
                                this.specReset();
                            } else {
                                // 添加2、3级的处理
                                this.addchildSpecFun(data);
                            }
                            this.$msg({ title: "添加成功" });
                        } else {
                            this.removeatheditspecFun(data, value);
                            this.$msg({ title: "编辑成功" });
                        }
                    }
                })
                .catch(() => {});
        },
        // 请求删除规格
        setRemovespecFun(data) {
            this.$confirm("确定删除该规格吗?", "删除规格", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let url = config.SPEC_DEL;
                    let param = {
                        id: data.id,
                        cpid: this.cpInfo.id,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.removeatheditspecFun(data);
                        this.$msg({ title: "删除成功" });
                    }
                })
                .catch(() => {});
        },

        // 请求改变规格选中状态
        async setCheckboxFun(data) {
            let url = config.SEPCIDS_SAVE2;
            let param = {
                id: data.id,
                cpid: this.cpInfo.id,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.handleNodeCheckbox(data);
                this.$msg({ title: "保存成功" });
            }
        },
        // 添加下级规格后获取新的列表
        async addchildSpecFun(data) {
            let url = config.GDPRE_SPECF_LS;
            let param = {
                fid: data.id,
                pfrom: 0,
                pnum: 100,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data.spec_ls) {
                let spec_ls = res.data.spec_ls[res.data.spec_ls.length - 1];
                if (data.lev == 1) {
                    // 追加二级规格
                    this.specData.map((v) => {
                        if (v.id == data.id) {
                            if (!v.son) {
                                v.son = [];
                            }
                            spec_ls.lev = 2;
                            v.son.push(spec_ls);
                            this.$nextTick(() => {
                                this.defaultCheckboxData.push(spec_ls.id);
                                this.$refs.areaTrees.setCheckedKeys(
                                    this.defaultCheckboxData
                                );
                            });
                        }
                    });
                } else {
                    // 追加3级规格
                    this.specData.map((v) => {
                        if (v.id == data.fid) {
                            v.son.map((vs) => {
                                if (vs.id == data.id) {
                                    if (!vs.son) {
                                        vs.son = [];
                                    }
                                    spec_ls.lev = 3;
                                    vs.son.push(spec_ls);
                                    this.$nextTick(() => {
                                        this.defaultCheckboxData.push(
                                            spec_ls.id
                                        );
                                        this.$refs.areaTrees.setCheckedKeys(
                                            this.defaultCheckboxData
                                        );
                                    });
                                }
                            });
                        }
                    });
                }
            }
        },
        // 删除/编辑规格
        removeatheditspecFun(data, value = null) {
            if (data.lev == 1) {
                // 删除/编辑1级
                this.specData.map((v, i) => {
                    if (v.id == data.id) {
                        if (value) {
                            v.title = value;
                        } else {
                            this.specData.splice(i, 1);
                        }
                    }
                });
            } else if (data.lev == 2) {
                // 删除/编辑2级
                this.specData.map((v) => {
                    if (v.id == data.fid) {
                        v.son.map((vs, i) => {
                            if (vs.id == data.id) {
                                if (value) {
                                    vs.title = value;
                                } else {
                                    v.son.splice(i, 1);
                                }
                            }
                        });
                    }
                });
            } else {
                // 删除/编辑3级
                this.specData.map((v) => {
                    if (v.son) {
                        v.son.map((vs) => {
                            if (vs.id == data.fid) {
                                vs.son.map((vw, i) => {
                                    if (vw.id == data.id) {
                                        if (value) {
                                            vw.title = value;
                                        } else {
                                            vs.son.splice(i, 1);
                                        }
                                    }
                                });
                            }
                        });
                    }
                });
            }
        },
        // 选中/取消选中规格节点
        handleNodeCheckbox(data) {
            let defaultarr = this.defaultCheckboxData;
            let arrid1 = [];
            let arrid2 = [];
            let arrid3 = [];
            // 收集需要勾选的规格id
            if (data.lev == 1) {
                // 选中1级就收集2级和3级的id;
                arrid1 = [data.id];
                this.specData.map((v) => {
                    if (data.id == v.id && v.son) {
                        v.son.map((vs) => {
                            arrid1.push(vs.id);
                            if (vs.son) {
                                vs.son.map((vw) => {
                                    arrid1.push(vw.id);
                                });
                            }
                        });
                    }
                });
            } else if (data.lev == 2) {
                // 选中2级就收集1级和3级的id;
                arrid1 = [data.fid];
                arrid2 = [data.id];
                this.specData.map((v) => {
                    if (v.id == data.fid && v.son) {
                        v.son.map((vs) => {
                            if (data.id == vs.id && vs.son) {
                                vs.son.map((vw) => {
                                    arrid2.push(vw.id);
                                });
                            }
                        });
                    }
                });
            } else if (data.lev == 3) {
                // 选中3级就收集1级和2级的id;
                arrid2 = [data.fid];
                arrid3 = [data.id];
                this.specData.map((v) => {
                    if (v.son) {
                        v.son.map((vs) => {
                            if (vs.id == data.fid && vs.son) {
                                vs.son.map((vw) => {
                                    if (data.id == vw.id) {
                                        arrid1.push(v.id);
                                    }
                                });
                            }
                        });
                    }
                });
            }

            // 集合处理勾选/未勾选的数据
            let levArr =
                data.lev == 1 ? arrid1 : data.lev == 2 ? arrid2 : arrid3;
            let levArrs =
                data.lev == 1
                    ? arrid1
                    : data.lev == 2
                    ? arrid1.concat(arrid2)
                    : arrid1.concat(arrid2, arrid3);

            if (defaultarr.indexOf(data.id) > -1) {
                // 取消勾选
                levArr.map((v) => {
                    defaultarr.map((vs, vi) => {
                        if (vs == v) {
                            defaultarr.splice(vi, 1);
                        }
                    });
                });
            } else {
                // 勾选
                defaultarr = defaultarr.concat(levArrs);
            }

            // 渲染到页面
            this.$nextTick(() => {
                defaultarr = new Set(defaultarr); //去重
                this.defaultCheckboxData = [...defaultarr];
                this.$refs.areaTrees.setCheckedKeys(this.defaultCheckboxData);
            });
        },
        // 设置初始化规格的选中状态
        checkboxDataFun(data) {
            data.map((v) => {
                if (v.status == 1) {
                    this.defaultCheckboxData.push(v.id);
                }
                v.lev = "1"; //添加层级标识
                if (v.son) {
                    v.son.map((vs) => {
                        if (vs.status == 1) {
                            this.defaultCheckboxData.push(vs.id);
                        }
                        vs.lev = "2"; //添加层级标识
                        if (vs.son) {
                            vs.son.map((vw) => {
                                if (vw.status == 1) {
                                    this.defaultCheckboxData.push(vw.id);
                                }
                                vw.lev = "3"; //添加层级标识
                            });
                        }
                    });
                }
            });
            return data;
        },
        // 滚动加载
        loadFun() {
            if (this.is_load) return;
            this.pfrom += 10;
            const data = {
                kw: this.spec_name || "",
                pfrom: this.pfrom,
                pnum: 10,
            };
            this.getSpeclistFun(data);
        },
        // 重置
        specReset() {
            this.spec_name = "";
            this.is_load = false;
            this.specData = [];
            this.defaultCheckboxData = [];
            if (this.scrolled > 0) {
                this.pfrom = -10;
                this.scrolled = -1;
            } else {
                const data = {
                    pfrom: 0,
                    pnum: 10,
                };
                this.getSpeclistFun(data);
            }
        },
        // 搜索
        specSearch() {
            this.is_load = false;
            this.specData = [];
            this.defaultCheckboxData = [];
            if (this.scrolled > 0) {
                this.scrolled = -1;
                this.pfrom = -10;
            } else {
                const data = {
                    kw: this.spec_name,
                    pfrom: 0,
                    pnum: 10,
                };
                this.getSpeclistFun(data);
            }
        },
        // 请求获取规格列表
        async getSpeclistFun(val) {
            let url = config.GDPRE_SPEC_LS;
            let param = val;
            let res = await this.$api({ url: url, data: param });
            if (res.data.spec_ls && res.data.spec_ls.length > 0) {
                this.specData = this.specData.concat(
                    this.checkboxDataFun(res.data.spec_ls)
                );
                this.is_load = false;
            } else {
                this.is_load = true;
            }
        },
        setConfigureSwitch(val) {
            const data = {
                key: "spec",
                is_updata: true,
            };
            this.$emit("setConfigureSwitch", data, val);
        },
    },
};
</script>

<style lang="scss" scoped>
.spec-ifications {
    .dialog-box {
        .dialog-top{
            display: flex;
            flex-wrap: wrap;
        }
        .dialog-from {
            .form-row {
                display: flex;
                .form-item {
                    margin-right: 10px;
                    margin-bottom: 10px;
                    .w-input {
                        width: 242px;
                    }
                }
            }
        }
        .multi-spec {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px #dcdfe6 solid;
            width: 380px;
            padding: 0px 10px;
            border-radius: 5px;
            margin-right: 10px;
            margin-bottom: 10px;
            height: 38px;
            .multi-text {
                font-size: 12px;
                .title {
                    font-size: 14px;
                    margin-right: 10px;
                }
                .explain {
                    color: #9d9d9d;
                }
            }
        }

        ::v-deep.spec-data-list {
            margin-top: 20px;
            height: 400px;
            overflow: auto;
            .el-tree-node__content {
                height: 40px;
                border-bottom: 1px #ebeef5 solid;
            }
            .custom-tree-node {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                padding-right: 8px;
                .node-label {
                    margin-left: 10px;
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .el-button {
                    padding: 5px;
                    font-size: 12px;
                }
            }
        }
        ::v-deep.add-spec-box {
            margin-top: 10px;
            .el-button {
                width: 100%;
                color: #459ffd;
                border-color: #459ffd;
            }
        }
    }
}
</style>